<template>
  <ul class='cont'>
    <li v-for='(item,index) in dataList' :key='index'>
      <div class='cont-header'>
        <span>{{trendChacted}}{{item.name}}</span>
      </div>
      <chart :options="item.value" ref="bar" theme="ovilia-green" auto-resize style='width:100%;height:100%'></chart>
    </li>
  </ul>
</template>

<script>
  import getBarLeft from './data/dataGoverBarLeft'
  export default {
    data() {
      return {
        dataList: [
          {
            name: '项目数（个）',
            value: getBarLeft()
          },
          {
            name: '数据集（个）',
            value: getBarLeft()
          },
          {
            name: '数据量（条）',
            value: getBarLeft()
          }
        ]
      }
    },
    props: {
      trendChacted: {
        default: '物探工程'
      },
      chacked: {
        type: Object,
        default: function() {
          return {
            name: '',
            num: '结构化数据'
          }
        }
      }
    },
    watch: {
      trendChacted(value) {
        this.dataList[0].value = getBarLeft()
        this.dataList[1].value = getBarLeft()
        this.dataList[2].value = getBarLeft()
      },
      chacked: {
        handler(val, oldval) {
          this.dataList[0].value = getBarLeft()
        		this.dataList[1].value = getBarLeft()
        		this.dataList[2].value = getBarLeft()
        },
        deep: true
      }
    }
  }
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  .cont {
    margin-left: -15px;
    margin-top: -20px;
    li {
      margin-left: 18px;
      margin-top: 20px;
      width: calc(50% - 21px);
      display: inline-block;
      border: 1px solid #ebeef5;
      border-radius: 5px;
      height: 450px;
      padding-top: 44px;
      position: relative;
    }
    .cont-header {
      position: absolute;
      width: 100%;
      padding: 0 20px;
      top: 0;
      left: 0;
      height: 44px;
      line-height: 44px;
      border-bottom: 1px solid #ebeef5;
      font-size: 14px;
      .endtime {
        float: right;
        color: #999;
        font-size: 12px
      }
    }
  }
</style>